<!DOCTYPE html>
<html lang="zh">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
	<meta name="author" content="小枫">
	<title><%= msg %></title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="default">
	<link href="/admin/css/bootstrap.min.css" rel="stylesheet">
	<link href="/admin/css/materialdesignicons.min.css" rel="stylesheet">
	<link href="/admin/css/style.min.css" rel="stylesheet">
	<style type="text/css">
		:root {
			--primary-color: #7266ee;
			--error-color: #ff4757;
		}

		body {
			background: linear-gradient(135deg, #f4f5fa 0%, #e6e9f0 100%);
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: 'Helvetica Neue', Arial, sans-serif;
		}

		.error-card {
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(10px);
			border-radius: 20px;
			padding: 3rem 4rem;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			text-align: center;
			max-width: 600px;
			width: 90%;
			transition: transform 0.3s ease;
		}

		.error-card:hover {
			transform: translateY(-5px);
		}

		.error-code {
			font-size: 8rem;
			font-weight: 700;
			color: var(--error-color);
			text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 1rem;
			animation: pulse 2s infinite;
		}

		.error-message {
			font-size: 1.8rem;
			color: #2d3436;
			margin-bottom: 2rem;
			line-height: 1.4;
		}

		.countdown {
			font-size: 1.2rem;
			color: #636e72;
			margin: 1.5rem 0;
		}

		.countdown span {
			font-weight: bold;
			color: var(--error-color);
		}

		.action-buttons {
			display: flex;
			gap: 1rem;
			justify-content: center;
			margin-top: 2rem;
		}

		.btn-custom {
			padding: .5rem 1.6rem;
			border-radius: 50px;
			font-weight: 500;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}

		.btn-custom i {
			font-size: 1.2rem;
		}

		@keyframes pulse {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.05);
			}

			100% {
				transform: scale(1);
			}
		}

		@media (max-width: 768px) {
			.error-card {
				padding: 2rem;
			}

			.error-code {
				font-size: 6rem;
			}

			.error-message {
				font-size: 1.4rem;
			}

			.action-buttons a {
				padding: .35rem .9rem;
			}
		}
	</style>
</head>

<body>
	<div class="error-card">
		<div class="error-content">
			<div class="error-code"><%= code %></div>
			<h1 class="error-message"><%= msg %></h1>

			<div class="countdown">
				<span id="countdown">5</span>秒后自动跳转到登录页面
			</div>

			<div class="action-buttons">
				<a href="/admin/login.html" class="btn btn-primary btn-custom" id="btn-login">
					<i class="mdi mdi-login"></i>立即登录
				</a>
				<a href="/" class="btn btn-outline-secondary btn-custom">
					<i class="mdi mdi-home"></i>返回首页
				</a>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="/admin/js/jquery.min.js"></script>
	<script type="text/javascript" src="/admin/js/bootstrap.min.js"></script>
	<script>
		$(document).ready(() => {
			const $countdownSection = $('.countdown')
			const $btnLogin = $('#btn-login')

			if (location.pathname === '/admin/login.html') {
				$countdownSection.remove()
				$btnLogin.remove()
				return
			}

			const $countdownElement = $('#countdown')

			let seconds = 5
			const timer = setInterval(() => {
				seconds--
				$countdownElement.text(seconds)
				if (seconds <= 0) {
					clearInterval(timer)
					seconds = null
					window.location.href = '/admin/login.html'
				}
			}, 1000)

			$btnLogin.on('click', function () {
				clearInterval(timer)
				seconds = null
				$countdownSection.hide()
				
				$(this).html('<i class="mdi mdi-check"></i> 已取消跳转')
					.removeClass('btn-primary')
					.addClass('btn-success')
					.prop('disabled', true)
			})
		})
	</script>
</body>

</html>